#{extends '/template/main.html' /}

<div class="row">

    <div class="col-sm-12" style="text-align: center">

        <h3> 数据展示</h3>

    </div>

    <div class="col-sm-3">

        <div class="xe-widget xe-counter-block xe-counter-block-blue" data-count=".num" data-from="0"   data-to="${webUserList.size()*2}"  data-duration="2">
            <div class="xe-upper">

                <div class="xe-icon">
                    <i class="linecons-user"></i>
                </div>
                <div class="xe-label">
                    <strong class="num">${webUserList.size()*2}</strong>
                    <span>用户数量</span>
                </div>

            </div>
            <div class="xe-lower">
                <div class="border"></div>

                <span>Customer </span>
                <strong>Number:${webUserList.size()*2}</strong>
            </div>
        </div>

    </div>

    <div class="col-sm-3">

        <div class="xe-widget xe-progress-counter xe-progress-counter-turquoise" data-count=".num" data-from="0" data-to="${merchantList.size()*2}" data-duration="3">
            <div class="xe-upper">

                <div class="xe-icon">
                    <i class="fa-university"></i>
                </div>
                <div class="xe-label">
                    <strong class="num">${merchantList.size()*2}</strong>
                    <span>商户数量</span>
                </div>

            </div>
            <div class="xe-lower">
                <div class="border"></div>

                <span>Merchant </span>
                <strong>Number:${merchantList.size()*2}</strong>
            </div>
        </div>

    </div>

    <div class="col-sm-3">

        <div class="xe-widget xe-counter-block xe-counter-block-orange"  data-count=".num" data-from="0" data-to="${productList.size()*2}" data-duration="4" data-easing="false">
            <div class="xe-upper">

                <div class="xe-icon">
                    <i class="fa-coffee"></i>
                </div>
                <div class="xe-label">
                    <strong class="num">${productList.size()*2}</strong>
                    <span>产品数量</span>
                </div>

            </div>
            <div class="xe-lower">
                <div class="border"></div>

                <span>Product</span>
                <strong>Number:${productList.size()*2}</strong>
            </div>
        </div>

    </div>
    <div class="col-sm-3">

        <div class="xe-widget xe-counter-block" data-count=".num" data-from="0" data-to="${productRecordList.size()*2}" data-duration="4" data-easing="false">
            <div class="xe-upper">

                <div class="xe-icon">
                    <i class="fa-life-ring"></i>
                </div>
                <div class="xe-label">
                    <strong class="num">${productRecordList.size()}</strong>
                    <span>月访问量</span>
                </div>

            </div>
            <div class="xe-lower">
                <div class="border"></div>

                <span>Product</span>
                <strong>Visit:${productRecordList.size()}</strong>
            </div>
        </div>

    </div>
    <div class="col-sm-6">

        <div class="xe-widget xe-vertical-counter xe-vertical-counter-yellow" data-count=".num" data-to="${orderList.size()*2}" data-from="0"  data-duration="3">
            <div class="xe-icon">
                <i class="fa-area-chart"></i>
            </div>

            <div class="xe-label">
                <strong class="num">${orderList.size()*2}</strong>
                <span>月成交订单数</span>
            </div>
        </div>

    </div>
    <div class="col-sm-6">

        <div class="xe-widget xe-vertical-counter xe-vertical-counter-danger" data-count=".num" data-to="${sumAcountCount.format('#.##')}" data-from="0"  data-duration="3">
            <div class="xe-icon">
                <i class="fa-line-chart"></i>
            </div>

            <div class="xe-label">
                <strong class="num">${sumAcountCount.format('#.##')}</strong>
                <span>月成交额度</span>
            </div>
        </div>

    </div>


</div>